<template>
	<view class="logistics_details">
		<view class="logistics_details_header">
			<view class="logistics_details_header_content">
				<view class="logistics_details_header_content_item">
					<view class="logistics_details_header_content_item_left">
						<text class="logistics_details_header_content_item_left_text1">
							<template v-if="data?.ShipperCode === 'STO'">申通快递</template>
							<template v-else-if="data?.ShipperCode === 'YTO'">圆通快递</template>
							<template v-else-if="data?.ShipperCode === 'HTKY'">百世快递</template>：</text>
						<text>{{data?.LogisticCode}}</text>
					</view>
					<button class="logistics_details_header_content_item_right" @click="handleCopy">复制</button>
				</view>
				<view class="logistics_details_header_content_item">
					<view class="logistics_details_header_content_item_left">
						<text class="logistics_details_header_content_item_left_text1">订单编号：</text>
						<text>{{data?.orderNo}}</text>
					</view>
				</view>
				<view class="logistics_details_header_content_item">
					<view class="logistics_details_header_content_item_left">
						<text class="logistics_details_header_content_item_left_text1">收货地址：</text>
						<text class="logistics_details_header_content_item_left_text2">{{data?.address}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 物流信息 -->
		<view class="logistics_details_info">
			<logisticsSteps :options="data?.Traces" v-if="data?.Traces?.length > 0"></logisticsSteps>
			<u-empty v-else marginTop="100" text="暂无物流信息" icon="http://qianxueapplet.suoeryun.com/wl.png"></u-empty>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import logisticsSteps from '@/components/logisticsSteps.vue';
	import { onUnmounted, ref, toRaw } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { getBusinessOrderHandle } from '@/config/goodStuff.api';

	const options = ref([{}, {}, {}]);
	const data = ref();

	onLoad(async (params) => {
		// 查询物流信息
		const logistics = uni.getStorageSync('logistics');
		console.log(logistics, 'logistics');
		if (logistics) {
			data.value = { ...params, ...logistics };
		} else {
			const res = await getBusinessOrderHandle({ trackType: '1', logisticCode: params?.logisticCode, shipperCode: params?.shipperCode, orderId: params?.orderId });
			res?.Traces?.reverse();
			data.value = { ...params, ...res };
		}
		console.log(data, 'data');
	})

	onUnmounted(() => {
		uni.removeStorageSync('logistics');
	})

	/**
	 * 复制
	 */
	function handleCopy() {
		uni.setClipboardData({
			data: data.value?.LogisticCode,
			success: function () {
				uni.showToast({
					icon: 'none',
					title: '复制成功!'
				})
			}
		});
	}
</script>

<style lang="scss" scoped>
	.logistics_details {
		.logistics_details_header {
			margin: 24rpx 0;
			background-color: #fff;
			padding: 24rpx;

			.logistics_details_header_content {
				padding: 24rpx;
				background-color: #FEF9FA;

				.logistics_details_header_content_item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
					margin-bottom: 10rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.logistics_details_header_content_item_left {
						display: flex;
						align-items: center;
						flex: 1;

						.logistics_details_header_content_item_left_text1 {
							width: 140rpx;
						}

						.logistics_details_header_content_item_left_text2 {
							line-height: 40rpx;
						}
					}

					.logistics_details_header_content_item_right {
						margin: 0;
						padding: 0;
						background-color: #fff;
						font-size: 28rpx;
						color: #C83F4D;
						line-height: 28rpx;
						background-color: transparent;

						&::after {
							border: 0;
						}
					}
				}
			}
		}

		.logistics_details_info {
			background-color: #fff;
			padding: 1rpx 28rpx 28rpx 28rpx;
		}
	}
</style>